<template>
  <div class="fnvv">
    <van-tabs v-model:active="active">
      <van-tab title="视觉设计" @click="xq">
        <van-card
          v-for="(item, i) in homeData"
          :key="item.id"
          :price="item.price"
          desc="6677正在学"
          :title="item.title"
          thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u2233.svg"
        />
      </van-tab>
      <van-tab title="海报设计" @click="xq">
        <van-card
          v-for="(item, i) in homeData"
          :key="item.id"
          :price="item.price"
          desc="6677正在学"
          :title="item.title"
          thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E9%A6%96%E9%A1%B5/u4356.svg"
        />
      </van-tab>
      <van-tab title="电商设计" @click="xq">
        <van-card
          v-for="(item, i) in homeData"
          :key="item.id"
          :price="item.price"
          desc="6677正在学"
          :title="item.title"
          thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u2233.svg"
        />
      </van-tab>
      <van-tab title="字体设计" @click="xq">
        <van-card
          v-for="(item, i) in homeData"
          :key="item.id"
          :price="item.price"
          desc="6677正在学"
          :title="item.title"
          thumb="https://cimg.axureshop.com/8d/be/1b/8dbe1b168ccf4f42b0439b5e6fb73ebf/images/%E9%A6%96%E9%A1%B5/u4356.svg"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  name: 'Fnvv',
  data() {
    // console.log(data);
    const active = ref(0)
    return {
      active,
      homeData: {},
      active: 0,
      // images: [data.image1, data.image2],
      themeVars: {
        cardThumbSize: '100px',
        carTextSize: '20px',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '20px',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data.list7
      })
      .catch(console.error)
  },

  methods: {
    xq() {
      this.$router.push('/paydetail')
      console.log('this.$return.data')
    },
  },
}
</script>

<style lang="less" scoped>
.fnvv {
  margin-top: 10%;
}
:deep(.van-card__price-integer) {
  color: rgb(216, 83, 83);
}
:deep(.van-card__price-currency) {
  color: coral;
  font-size: 16px;
}
</style>
